.card {
    margin-top: 50px;
    margin-left: 550px;
    width: 300px;
    height: 400px;
    border-radius: 10px;
    transition: 0.3s;
    transform: perspective(500px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

.card img {
    width: 100%;
    height: 100%;
}

.card:hover {
    /* 鼠标悬停之后给一个阴影 */
    box-shadow: -3px -3px 10px #54a29e, 3px 3px 10px #a79d66;
}